<template>
    <div id='righticon'>
        <div class='a3e' @click='showicon()'>
            <div class='a3f' >
                <div class='a1 aa'>
                    <router-link :to="{path:'/index'}" class='ric1 aa1'>首页</router-link>
                    <router-link :to="{path:'/homeCategorySearch'}" class='ric2 aa1'>分类</router-link>
                    <router-link :to="{path:'/shopcar'}" class='ric3 aa1'>购物车</router-link>
                    <router-link :to="{path:'/orderlist'}" class='ric4 aa1'>订单</router-link>
                    <router-link :to="{path:'/user'}" class='ric5 aa1'>我的</router-link>
                    <i class="a3m"></i>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    methods:{
        showicon(){
            this.$jq('.a3f').toggleClass('iconShow') 
        }
    }
};
</script>
<style scoped>
/* 右边icon图标开始 */
.a3e {
  position: fixed;
  z-index: 1000;
  right: 0;
  bottom: 7.75rem;
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(0, 0, 0, 0.8)
    url(/static/bm.png) 
    no-repeat;
  background-size: 4.06rem 1.25rem;
  background-position: 0.5rem 0.62rem;
  border: 0.1rem solid #757575;
  border-radius: 0.25rem 0 0 0.25rem;
}
.a3f{
    display: none;
    position: absolute;
    right: 0.0625rem;
    bottom: 2.6rem;
    width: 6rem;
    border: 0.1rem solid #757575;
    background: rgba(0,0,0,0.8);
}
.a3m{
    position: absolute;
    bottom: -0.75rem;
    right: 0.625rem;
    width: 0;
    height: 0;
    z-index: 15;
    border-width: 0.375rem;
    border-color: rgba(0,0,0,0.8) transparent transparent transparent;
    border-style: solid;
}
.aa1{
    width:100%;
    display:none
}
.ric1{
    display: inline-block;
    padding-left: 2.375rem;
    border-bottom: 0.1rem solid #4b4b4b;
    line-height: 2.19rem;
    height: 2.19rem;
    color: #fff;
    background-image: url(/static/bmenu.png);
    background-repeat: no-repeat;
    background-size: 1rem 18.75rem;
    background-position:0.6rem -3.2rem;
}
.ric2{
    display:inline-block;
    padding-left: 2.375rem;
    border-bottom: 0.1rem solid #4b4b4b;
    line-height: 2.19rem;
    height: 2.19rem;
    color: #fff;
    background-image: url(/static/bmenu.png);
    background-repeat: no-repeat;
    background-size: 1rem 18.75rem;
    background-position: 0.6rem -6.2rem;
}
.ric3{
    display: inline-block;
    padding-left: 2.375rem;
    border-bottom: 0.1rem solid #4b4b4b;
    line-height: 2.19rem;
    height: 2.19rem;
    color: #fff;
    background-image: url(/static/bmenu.png);
    background-repeat: no-repeat;
    background-size: 1rem 18.75rem;
    background-position: 0.6rem -9.2rem;
}
.ric4{
    display: inline-block;
    padding-left: 2.375rem;
    border-bottom: 0.1rem solid #4b4b4b;
    line-height: 2.19rem;
    height: 2.19rem;
    color: #fff;
    background-image: url(/static/bmenu.png);
    background-repeat: no-repeat;
    background-size: 1rem 18.75rem;
    background-position: 0.6rem -12.4rem;
}
.ric5{
    display: inline-block;
    padding-left: 2.375rem;
    border-bottom: 0.1rem solid #4b4b4b;
    line-height: 2.19rem;
    height: 2.19rem;
    color: #fff;
    background-image: url(/static/bmenu.png);
    background-repeat: no-repeat;
    background-size: 1rem 18.75rem;
    background-position:0.6rem -15.6rem;
}
.iconShow{
    display: block;
}

</style>


